<template>
    <div class="all">
        <!-- <div style="text-align:center;font-size:28px;font-weight:bold;">{{$route.name}}</div> -->
        <div class="search">
            <el-form ref="form" :model="carSearch" :inline="true" label-width="85px" size="mini">
                <!-- <el-form-item label="会员：">
                    <el-input v-model="carSearch.userName" clearable placeholder="请输入会员"></el-input>
                </el-form-item>
                <el-form-item label="手机号：">
                    <el-input v-model="carSearch.userPhone" clearable placeholder="请输入手机号"></el-input>
                </el-form-item> -->
                <el-form-item label="车辆：">
                    <el-input v-model="carSearch.plate_number" clearable placeholder="请输入车牌"></el-input>
                </el-form-item>
                <el-form-item label="车辆类型：">
                    <el-select v-model="carSearch.type" clearable placehorlder="请选择车辆类型">
                        <el-option v-for="item in carState" :key="item.id" :label="item.car" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchClick(2)">查 询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- <div class="btn">
            <el-button size="medium" type="primary" @click="add()">添 加</el-button>
        </div> -->
        <div class="table">
            <!-- 表格 -->
            <el-table
                :data="carTable"
                border
                height="560"
                :style="{width:screenWidth+'px'}"
                :cell-style="cellStyle"
                :header-cell-style="rowClass"
            >
                <!-- <el-table-column type="selection" width="60px"></el-table-column> -->
                <el-table-column type="index" label="序号" width="80px"></el-table-column>
                <!-- <el-table-column label="会员" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.userName }}</span>
                    </template>
                </el-table-column>-->
                <!-- <el-table-column label="手机号" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.userPhone }}</span>
                    </template>
                </el-table-column> -->
                <el-table-column label="车辆类型" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.type | carstate }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="车牌" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.plate_number }}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="车架号" width="180px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.vin }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="地区" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.area }}</span>
                    </template>
                </el-table-column>-->
                <el-table-column label="添加时间" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.create_time*1000 | formatDate }} {{ scope.row.create_time*1000 | formatDateBehind }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="洗车剩余次数" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.wash_remain_num }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="消费总金额" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.consumption }}元</span>
                    </template>
                </el-table-column>
                <el-table-column label="充值总金额" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.recharge }}元</span>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip label="备注" width="200px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.note }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="240px" v-if="jurisdiction.update_state === 1 || jurisdiction.delete_state === 1">
                    <template slot-scope="scope">
                        <el-button
                            v-if="jurisdiction.update_state === 1"
                            size="small"
                            type="primary"
                            @click="edit(scope.$index, scope.row)"
                        >修改</el-button>
                        <el-button
                            v-if="jurisdiction.delete_state === 1"
                            size="small"
                            type="danger"
                            @click="remove(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
                @size-change="pageCount"
                @current-change="currentPageCount"
                :current-page="currentPage"
                :page-sizes="[100, 500,1000,1500, 2000]"
                :page-size="currentCount"
                layout="prev, pager, next, jumper, sizes,total"
                :total="pageResultSize"
            ></el-pagination>
        </div>
        <div>
            <!-- 修改对话框 -->
            <el-dialog title="修改" width="400px" :visible.sync="editVisible" center @close="closeEdit">
                <el-form :model="editVehicles">
                    <el-form-item label="车牌：" :label-width="formLabelWidth">
                        <el-input v-model="editVehicles.plate_number" placeholder="请输入车牌"></el-input>
                    </el-form-item>
                    <el-form-item label="备注：" :label-width="formLabelWidth">
                        <el-input
                            type="textarea"
                            autosize
                            v-model="editVehicles.note"
                            placeholder="请输入备注"
                        ></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer">
                    <el-button @click="cancelEdit">取 消</el-button>
                    <el-button type="primary" @click="confirmEdit">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import "../../../static/scss/page.scss";
import utils from "../../util/request";
import {formatDate} from "../../util/time.js";
export default {
    data() {
        return {
            // 分页
            jurisdiction: null,
            currentPage: 1, //初始页面
            currentCount: 100, //当前页面的数据数量
            pageResultSize: 10, //表格数据总数
            screenWidth: window.innerWidth, //可视宽度
            editVisible: false, //修改对话框
            formLabelWidth: "100px", //表单label宽度
            editVehicles: {
                //修改对话框表单
                id:"",
                storeId: "", //企业合作车辆id
                plate_number: "", //车牌
                note: "" //备注
            },
            carSearch: {
                //搜索
                // userName: "", //会员
                // userPhone: "", //手机号
                plate_number: "", //车牌
                type: ""//车辆类型
            },
            carTable: [
                {
                    carNumber: "粤B7CU91", //车牌
                    addTime: "2020-08-13", //添加时间
                    note: "" //备注
                },
                {
                    carNumber: "粤B7CU91", //车牌
                    addTime: "2020-08-13", //添加时间
                    note: "" //备注
                },
                {
                    carNumber: "粤B7CU91", //车牌
                    addTime: "2020-08-13", //添加时间
                    note: "" //备注
                }
            ],
            carState:[
                {id:1,car:"轿车"},
                {id:2,car:"SUV"},
                {id:3,car:"MPV"},
            ],
            // rules:{
            //     plate_number: {

            //     },
            //     note:{

            //     }
            // }
        };
    },
    filters:{
        carstate(num){
            if(num === 1){
                num = "轿车";
            }else if(num === 2){
                num = "SUV";
            }else if(num === 3){
                num = "MPV";
            }else{return}
            return num
        },
        // 时间戳转换
        formatDate(time){
			var date = new Date(time);
			return formatDate(date, 'yyyy-MM-dd');
		},
		formatDateBehind(time){
			var date = new Date(time);
			return formatDate(date, 'hh:mm:ss')
		}
    },
    methods: {
        searchClick(num) {
            // 查询
            let data = {page:this.currentPage,list_rows:this.currentCount};
            for(var i in this.carSearch) this.carSearch[i] !== "" ? data[i] = this.carSearch[i] : "";
            utils.request("/car/list","post",JSON.stringify(data)).then(resp=>{
                console.log(resp)
                this.carTable = resp.data.data.data;
                this.pageResultSize = resp.data.data.total;
                if(num === 2){
                    resp.data.data.total 
                    ? this.$message({
                        message: "找到"+resp.data.data.total+"条运营车辆数据",
                        type: "success"
                    }) : this.$message("没有符合条件的数据");
                }else{return}
            })
        },
        add() {
            // 添加上传
        },
        edit(index, row) {
            // 修改
            console.log(index, row);
            this.editVisible = true;
            for(var i in this.editVehicles) this.editVehicles[i] = row[i];
            this.editVehicles.index = index;
            // this.editVehicles.carNumber = row.carNumber;
            // this.editVehicles.note = row.note;
        },
        confirmEdit() {
            // 确认修改
            let data = {}
            for(var i in this.editVehicles) i!== "index" ?  data[i] = this.editVehicles[i] : "";
            utils.request("/car/update","post",JSON.stringify(data)).then(resp=>{
                console.log(resp)
                if(resp.data.code === 200){
                    let key = this.editVehicles.index;
                    // this.carTable.splice(key,1,data)
                    this.carTable[key].plate_number = data.plate_number;
                    this.carTable[key].note = data.note;
                    this.editVisible = false;
                    this.$message({
                        message: "修改成功！",
                        type: "success"
                    })
                }else{return}
            })
        },
        cancelEdit() {
            // 取消修改
            this.editVisible = false;
            for(var i in this.editVehicles) this.editVehicles[i] = "";
            // this.editVehicles.carNumber = "";
            // this.editVehicles.note = "";
        },
        closeEdit() {
            // 关闭修改对话框
            this.editVisible = false;
            for(var i in this.editVehicles) this.editVehicles[i] = "";
            // this.editVehicles.carNumber = "";
            // this.editVehicles.note = "";
        },
        remove(index,row) {
            // 删除
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                utils.request("/car/delete","post",JSON.stringify({id:row.id})).then(resp=>{
                    if(resp.data.code === 200){
                        this.carTable.splice(index,1)
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }else{return}
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        //   表格居中
        cellStyle: function({ row, column, rowIndex, columnIndex }) {
            return "text-align:center;";
        },
        rowClass: function({ row, rowIndex }) {
            return "text-align:center;";
        },
        // 每页数据的数量
        pageCount: function(val) {
            this.currentCount = val;
            this.searchClick(1)
        },
        // 点击的第几页
        currentPageCount: function(val) {
            this.currentPage = val;
            this.searchClick(1)
        }
    },
    created() {
        let Base64 = require("js-base64").Base64;
        let menuarr = JSON.parse(Base64.decode(sessionStorage.getItem("menuarr")))
        for(var i=0;i<menuarr.length;i++){
            // console.log(menuarr[i].link)
            if(menuarr[i].link === this.$route.path){
                this.jurisdiction = menuarr[i]
            }else{}
        }
        this.searchClick(1)
    }
};
</script>




